<template>
  <SearchForm
    :searchInputList="searchInputList"
    :searchToolBtn="searchToolBtn"
    @searchHandel="searchHandel"
    @uploaded="uploaded"
  />
  <a-table :columns="columns" :data-source="sourceData" :scroll="{ x: 1500, y: 300 }">
    <template #bodyCell="{ column, record }">
      <!-- record 是ant-design 的表格的作用插槽 -->
      <template v-if="column.key === 'operation'">
        <template v-for="item in operation" :key="item.label">
          <a-button
            type="link"
            v-if="item.type === 'span'"
            @click="item.handleClick(record)"
          >{{ item.label }}</a-button>

          <a-popconfirm
            v-if="item.type === 'pop'"
            :title="item.message || `确认${item.label}吗？`"
            ok-text="确定"
            cancel-text="取消"
            @confirm="item.handleClick(record)"
          >
            <a-button type="link" v-if="!item.value">{{ item.label }}</a-button>
            <DynamicTextBtn v-else :text="item.value && item.value(record)"/>
          </a-popconfirm>

          <!-- <a-switch v-if="item.type === 'switch'" v-model:checked="checked" /> -->
        </template>
      </template>
    </template>
  </a-table>
</template>

<script setup lang="tsx">
import { PropType } from 'vue'

// import { PropType } from 'vue'// 不用导入

const props = defineProps({
  searchInputList: {
    // 输入项
    type: Array as PropType<Array<TableSearchInput>>,
    required: true,
    default: () => []
  },
  searchToolBtn: {
    // 表格搜索的额外按钮
    type: Array as PropType<Array<TableTools>>,
    default: () => []
  },
  columns: {
    // 表格的列字段
    type: Array as PropType<Array<any>>,
    default: () => []
  },
  data: {
    // 表格数据
    type: Array as PropType<Array<any>>,
    default: () => []
  },
  operation: {
    // 表格操作列
    type: Array as PropType<Array<TableOperation>>,
    default: () => []
  },
  queryData: {
    // 请求表格数据的api
    type: Function as PropType<(params: any) => Promise<any>>
  }
})

// 表单查询方法
const searchHandel = (params: any) => {
  console.log(params)
  queryDataFun(params) // 点击查询时调用 接口请求
}

const sourceData = ref() // 表格用到的数据
function queryDataFun(params?: any) {
  // 请求数据
  // 确保queryData 是一个函数 才调用
  props.queryData &&
      props.queryData(params).then((res) => {
        console.log(res)
        sourceData.value = res.result.records // 请求到数据 修改表格的数据
      })
}

queryDataFun()

// 上传成功
const uploaded = () => {
  queryDataFun()
}

// 对外暴露 查询表格数据并更新表格数据的方法
defineExpose({ queryDataFun })

// 根据value动态改变按钮文字
const DynamicTextBtn = ({text}:any)=>{
  return <a-button type="link">{text}</a-button>
}
</script>
